<template>
  <div>
    <h4>HelloFetch</h4>

    <button @click="headers['X-Host'] = 'mall.film-ticket.city.list'">城市列表数据</button>
    <button @click="headers['X-Host'] = 'mall.film-ticket.city.locate'">当前城市</button>

    <div v-if="error">{{ error }}</div>
    <div v-else-if="data?.cities">
      <ul>
        <li v-for="item of data.cities" :key="item.cityId">{{ item.name }}</li>
      </ul>
    </div>
    <div v-else-if="data?.city">
      {{ data.city.name }}
    </div>
    <div v-else>加载中....</div>
  </div>
</template>

<script>
import { ref } from 'vue'
import useFetch from '../hooks/useFetch'

export default {
  setup() {
    const headers = {
      'X-Host': 'mall.film-ticket.city.list'
    }

    const { data, error } = useFetch('https://m.maizuo.com/gateway', headers)

    return {
      data,
      error,
      headers
    }
  }
}
</script>
